<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/slider/jquery-1.11.0.js"></script>
</head>
<body>
    <form action="./target.html" id="login">
        <p>
            用户名: <input type="text" name="unanme">
            <span>
                帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
            </span>
        </p>

        <br>

        <p>
            密码: <input type="password" name="pwd">
            <span>
                密码密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
            </span>
        </p>

        <p>
            <input type="submit">
        </p>
        
       
        <script>
            //规则对象
            //对象的 键 和 input的type值 相对应
            let rule_obj={
                "text":/^[a-zA-Z]\w{5,17}$/,
                "password":/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/
            }
            //结果数组:每次事件 执行完毕 添加结果,在提交的时候 看数组内容是否 都是 true 都是则提交
            let arr2=[];

            //给所有input绑定 失去焦点 事件

            $("input").blur(function(){
                //拿到当前的type值: 就知道 规则对象 要取出哪一个规则了
                let type=$(this).prop("type")

                //定义规则:根据type的值  拿到 规则对象里面的 规则内容
                let rule=rule_obj[type]  

                //获取输入的值:用来做校验
                let in_val=$(this).val()
               


                //利用规则.test(输入的值) 进行校验:得到 true或者 fasle
                let bool1=rule.test(in_val)
                

                //对或者错 给不同的提示
                if(bool1){
                    $(this).next().text("正确")
                }else{
                    $(this).next().text("有问题")
                }
                arr2.push(bool1)
                
            });

            //提交事件 绑定给表单
            $("#login").submit(function(){
              //看数组中的 所有结果值
                //   console.log(arr2)
              //看数组有没有 false  -1就是没有 0 1 2 3...就说明有 
            //   console.log(arr2.indexOf(false))

            //是 -1 就提交
                if(arr2.indexOf(false)==-1){
                    return true
                }else{
                    return false
                }
              
            })


        </script>
    </form>
</body>
</html>